<template>
  <VaCheckbox v-model="isStriped" label="Striped" />
  <VaCheckbox v-model="isHoverable" label="Hoverable" />
  <div class="h-[300px] w-full">
    <AgGridVue
      class="ag-theme-vuestic w-full h-full"
      :class="{ 'ag-theme-vuestic--striped': isStriped, 'ag-theme-vuestic--hoverable': isHoverable }"
      :column-defs="columnDefs"
      :row-data="rowData"
      :modules="modules"
    />
  </div>
</template>

<script>
import { AgGridVue } from '@ag-grid-community/vue3'
import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model'

export default {
  components: { AgGridVue },
  data () {
    return {
      modules: [ClientSideRowModelModule],
      isStriped: true,
      isHoverable: true,
      rowData: null,
      columnDefs: [
        { field: 'athlete' },
        { field: 'age' },
        { field: 'country' },
        { field: 'year' },
        { field: 'date' },
        { field: 'sport' },
        { field: 'gold' },
        { field: 'silver' },
        { field: 'bronze' },
        { field: 'total' },
      ],
    }
  },
  beforeMount () {
    fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
      .then(result => result.json())
      .then(rowData => {
        this.rowData = rowData
      })
  },
}
</script>

<style lang="scss">
@import '@vuestic/ag-grid-theme';
</style>
